import { Tabs } from 'antd';
import type { TabsProps as AntdTabsProps } from 'antd/es/tabs';
import cls from 'classnames';
import React from 'react';
import Styles from './index.less';

export type TabsProps = AntdTabsProps & {
  // tab层级，默认为1级tabs，2级tabs页面字号比一级tabs页小
  tabsLevel?: number;
  // tabs中是否包含子tabs,包含子tab标题底部会有边框线
  hasChildTabs?: boolean;
  // 标题底部是否包含边框线，默认false不包含
  hasHeaderBorder?: boolean;
};

const Index: React.FC<TabsProps> = ({
  className,
  children,
  tabsLevel = 1,
  hasChildTabs = false,
  hasHeaderBorder = false,
  ...rest
}) => {
  return (
    <Tabs
      className={cls(
        Styles.mainTabs,
        tabsLevel === 2 && Styles.secondaryTabs,
        hasChildTabs && Styles.hasChildTabs,
        hasHeaderBorder && Styles.hasHeaderBorder,
        className,
      )}
      {...rest}
    >
      {children}
    </Tabs>
  );
};
export default Index;
